﻿@{
    ViewBag.Title = "用户管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section head{
    <style type="text/css">
        .letterbar
        {
            height: 30px;
            line-height: 30px;
            padding: 3px 0;
            text-align: center;
            clear: both;
        }
        .letterbar a
        {
            color: #0056BD;
            display: inline-block;
            height: 21px;
            line-height: 21px;
            text-align: center;
            position: relative;
            top: 1px;
            font-size: 14px;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            text-decoration: none;
            padding: 0 3px;
        }
        .letterbar a:hover
        {
            color: #D60000;
            border: 1px solid #B0B0B0;
        }
        #divLeft
        {
            background-color: White;
        }
    </style>
    <style type="text/css">
            div#navigation{background:white}
            div#wrapper{float:right;width:100%;margin-left:-185px}
            div#content{margin-left:185px}
            div#navigation{float:left;width:180px}
            .datagrid-cell a{color:black;}
            .datagrid-cell a:hover{color:red;}
        </style>
}

@section scripts{
        <script src="~/Areas/Sys/ViewModels/Organize.js"></script>
        <script src="~/Areas/Sys/ViewModels/User.js"></script>
        <script type="text/javascript">
            using(['validatebox','combobox']);
           var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
           ko.bindingViewModel(new viewModelUser(data));
           var formatterButton = function (value, row) {
                var dataStr = JSON.stringify({UserCode:row.UserCode,UserName:row.UserName,_isnew:row._isnew});
                var html = '<a href="#" onclick=\'setOrganize(' + dataStr + ')\'><span class="icon icon-org">&nbsp;</span>[设置机构]</a>';
                html += '<a href="#" onclick=\'setRole(' + dataStr + ')\' style="margin-left:10px"><span class="icon icon-group">&nbsp;</span>[设置角色]</a>';
//                html += '<a href="#" onclick=\'userSetting(' + dataStr + ')\' style="margin-left:10px"><span class="icon icon-wrench_orange">&nbsp;</span>[用户设置]</a>';
                return html;
           };
        </script>
}
<div id="container">
    <div id="wrapper">
        <div id="content">
            <div class="z-toolbar">
                <a id="a_refresh" href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a>
                <a id="a_add"     href="#" plain="true" class="easyui-linkbutton" icon="icon-add" title="新增" data-bind="click:addClick">新增</a>
                <a id="a_edit"    href="#" plain="true" class="easyui-linkbutton" icon="icon-edit" data-bind="click:editClick" title="编辑">编辑</a>
                <a id="a_del"     href="#" plain="true" class="easyui-linkbutton" icon="icon-cross" title="删除" data-bind="click:deleteClick">删除</a>
                <a id="a_save"    href="#" plain="true" class="easyui-linkbutton" icon="icon-save" data-bind="click:saveClick" title="保存">保存</a>
                <a id="a_pwd"     href="#" plain="true" class="easyui-linkbutton" icon="icon-key" data-bind="click:passwordClick" title="重置密码">重置密码</a>
            </div>
        @*    <div style="float:left" class="letterbar">&nbsp;首字母查找： 
            <a id="letterA" onclick="findByLetter('A')" class="cur" href="javascript:void(0)">A</a>
            <a id="letterB" onclick="findByLetter('B')" class="cur" href="javascript:void(0)"> B</a> 
            <a id="letterC" onclick="findByLetter('C')" class="cur" href="javascript:void(0)">C</a>
            <a id="letterD" onclick="findByLetter('D')" class="cur" href="javascript:void(0)">D</a>
            <a id="letterF" onclick="findByLetter('F')" class="cur" href="javascript:void(0)">F</a>
            <a id="letterG" onclick="findByLetter('G')" class="cur" href="javascript:void(0)">G</a>
            <a id="letterH" onclick="findByLetter('H')" class="cur" href="javascript:void(0)">H</a>
            <a id="letterJ" onclick="findByLetter('J')" class="cur" href="javascript:void(0)">J</a>
            <a id="letterK" onclick="findByLetter('K')" class="cur" href="javascript:void(0)">K</a>
            <a id="letterL" onclick="findByLetter('L')" class="cur" href="javascript:void(0)">L</a>
            <a id="letterM" onclick="findByLetter('M')" class="cur" href="javascript:void(0)">M</a>
            <a id="letterN" onclick="findByLetter('N')" class="cur" href="javascript:void(0)">N</a>
            <a id="letterO" onclick="findByLetter('O')" class="cur" href="javascript:void(0)">O</a>
            <a id="letterP" onclick="findByLetter('P')" class="cur" href="javascript:void(0)">P</a>
            <a id="letterQ" onclick="findByLetter('Q')" class="cur" href="javascript:void(0)">Q</a>
            <a id="letterR" onclick="findByLetter('R')" class="cur" href="javascript:void(0)">R</a>
            <a id="letterS" onclick="findByLetter('S')" class="cur" href="javascript:void(0)">S</a>
            <a id="letterT" onclick="findByLetter('T')" class="cur" href="javascript:void(0)">T</a>
            <a id="letterW" onclick="findByLetter('W')" class="cur" href="javascript:void(0)">W</a>
            <a id="letterX" onclick="findByLetter('X')" class="cur" href="javascript:void(0)">X</a>
            <a id="letterY" onclick="findByLetter('Y')" class="cur" href="javascript:void(0)">Y</a>
            <a id="letterZ" onclick="findByLetter('Z')" class="cur" href="javascript:void(0)">Z</a>
            <a id="letter?" title="数据未正确设置列表" onclick="findByLetter('?')" class="cur" href="javascript:void(0)">？</a>
            <a id="letter-" title="数据未正确设置列表" onclick="findByLetter('')" class="cur" href="javascript:void(0)">重置</a>
            </div>*@
            
            <div class="container_12" style="position:relative;">
            <div class="clear"></div>
            <div class="grid_1 lbl">用户编码</div>
            <div class="grid_2 val"><input type="text" data-bind="value:form.UserCode" class="z-txt " /></div>
            <div class="grid_1 lbl">用户姓名</div>
            <div class="grid_2 val"><input type="text" data-bind="value:form.UserName1" class="z-txt " /></div>
             <div class="clear"></div>
            <div class="grid_1 lbl">所属部门</div>
            <div class="grid_2 val">
            <input type="text" data-bind="lookupValue:form.OrganizeCode" class="z-txt easyui-lookup"
                    data-options="lookupType:'organize',parentField:'pid'" /></div>
    
            <div class="clear"></div>

           <div class="prefix_9" style="position:absolute;top:5px;height:0;">  
                <a id="a_search" href="#" class="button button-blue" style="margin:0 15px;" data-bind="click:searchClick">查询</a> 
                <a id="a_reset" href="#" class="button button-blue" data-bind="click:clearClick">清空</a>
            </div>
            </div>

            <table id="gridlist" data-bind="datagrid:grid">
                 <thead>  
                    <tr>  
                        <th field="UserCode"            sortable="true" align="left"    width="70"  editor="{type:'validatebox',options:{required:true}}"  >用户编码   </th>  
                        <th field="UserName"            sortable="true" align="left"    width="80"  editor="{type:'validatebox',options:{required:true}}"  >用户名称     </th>  
                        <th field="Sex"           sortable="true" align="center"    width="40"   editor="{type: 'combobox', options:{data:data.dataSource.sexItems}}"  >性别       </th>   
                        <th field="MobileNumber"        sortable="true" align="left"    width="100" editor="text"  >手机号   </th>  
                        <th field="Email"           hidden="false"    sortable="true" align="left"    width="120" editor="text"  >Email    </th>  
                        <th field="Description"         sortable="true" align="left"    width="120" editor="text"  >描述说明 </th>  
                        <th field="IsEnable"            sortable="true" align="center"  width="70"  editor="{type:'checkbox',options:{on:true,off:false}}" formatter="com.formatCheckbox">是否启用   </th>  
                        <th field="Permit"                              align="center"  width="210" formatter="formatterButton"> 操作     </th> 
                        <th field="LoginCount"          sortable="true" align="right"   width="60" >登陆次数       </th>  
                        <th field="LastLoginDate"       sortable="true" align="center"  width="120" formatter="com.formatTime"  >最后登陆时间  </th>   
                    </tr>                            
                </thead>      
            </table> 
 
        </div>
    </div>
    
    <div id="navigation">
        <div title="组织机构" style="width: 180px;" class="easyui-panel" data-options="title: '组织机构', iconCls: 'icon-org', height: $(window).height() - 4 ">
            <ul data-bind="easyuiTree:tree"></ul>
        </div>
    </div>
</div>

<script type="text/html" id="setorganize-template">
    <div style="margin:5px;">
        <div style="border-bottom:1px solid #CCC; margin-bottom:5px;">
            <span id="role_name" class="icon32 icon-user-edit32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:UserName">刘会胜</span> 
        </div>
        <div> 所属机构：</div>
        <div data-bind="html:graph"  style="height:315px;overflow:auto;"></div>
    </div>
    <div style="text-align:center;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>  
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> 
    </div>
</script> 

<script type="text/html" id="setrole-template">
    <style type="text/css">
        .listview{ margin:0 !important;}
        .listview li{width:100px !important;background-color:skyblue !important;float:left;margin:3px;}
    </style>
    <div style="margin:5px;height:370px;overflow:auto;"  >
        <div style="border-bottom:1px solid #CCC; margin-bottom:5px;">
            <span class="icon32 icon-user-edit32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:UserName">刘会胜</span> 
        </div>
        <div> 拥有角色(请点击勾选)：</div>
        <div class="metrouicss">
            <ul class="listview"></ul>
        </div>
    </div>
    <div style="text-align:center;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>  
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> 
    </div>
</script>
   @*  <style type="text/css">
         .datagrid-wrap{border-width:0 0 1px 0;}
        .datagrid-toolbar{background-color:#E0ECFF !important}
     </style>*@
<script type="text/html" id="manage-template">
    <table data-bind="datagrid:grid">
        <thead>
            <th field="ID" hidden="true"></th>
            <th field="UserCode" hidden="true"></th>
            <th field="SettingCode"    align="left" editor="{type:'validatebox',options:{required:true}}"    width="80"  >设置编码   </th>  
            <th field="SettingName"    align="left" editor="text"    width="70"  >设置名称   </th>  
            <th field="SettingValue"   align="left" editor="text"    width="120" >设定值   </th> 
            <th field="Description"    align="left" editor="text"    width="280" >描述说明   </th> 
        </thead>
    </table>
    
    <div style="text-align:center;margin:5px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>  
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> 
    </div>
</script>       
 